<template>
  <el-card class="box-card">
    <div>上架</div>
    <el-divider></el-divider>
   <div class="form">
      <el-form  class="demo-ruleForm" label-width="220px" :rules="rules" ref="onShelvesRuleForm" :model="queryInfo">
        <el-form-item label="商品编码:" prop="barCode">
          <el-select v-model="queryInfo.barCode" placeholder="请选择" clearable @change="getOptions">
            <el-option
              v-for="item in barCode"
              :key="item"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原货位编码:" prop="fromLocationId">
            <el-select v-model="queryInfo.fromLocationId" placeholder="请选择" clearable @change="getOptions">
              <el-option
                v-for="item in fromLocationId"
                :key="item"
                :label="item"
                :value="item"
                >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="货位编码:" prop="locationId">
          <el-select v-model="queryInfo.locationId" placeholder="请选择" clearable @change="getOptions">
            <el-option
              v-for="item in locationId"
              :key="item"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量:" prop="count">
          <el-input-number v-model="queryInfo.count" controls-position="right" :min="0" :max="availableQuantity"></el-input-number>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-plus" class="btm" @click="addShelves">上架</el-button>

    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      user: '',
      value: [],
      barCode: [],
      locationId: [],
      fromLocationId: [],
      availableQuantity: 0,
      queryInfo: {
        barCode: '',
        locationId: '',
        fromLocationId: '',
        count: ''
      },
      onShelves: {
        shelvesId: '',
        barCode: '',
        locationId: '',
        fromLocationId: '',
        count: '',
        createPerson: ''
      },
      rules: {
        barCode: [
          { required: true, message: '请输入条码', trigger: 'blur' }
        ],
        locationId: [
          { required: true, message: '请输入源货位编码', trigger: 'blur' }
        ],
        fromLocationId: [
          { required: true, message: '请输入货位编码', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入上架数量', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getOptions () {
      const { data: result } = await this.$http.get('/shelves/getQuery', { params: this.queryInfo })
      if (result.status === 201) return this.$message.error('获取库存失败')
      if (result.status === 203) return this.$message.error(result.msg)
      this.queryInfo.count = ''
      this.barCode = result.data.barCode
      console.log(this.barCode)
      this.locationId = result.data.locationId
      this.fromLocationId = result.data.fromLocationId
      this.availableQuantity = result.data.availableQuantity
    },

    addShelves () {
      this.$refs.onShelvesRuleForm.validate(async validate => {
        if (!validate) return this.$message.error('请填写数据')
        this.writeShelves()
        if (this.onShelves.count === 0) return this.$message.error('上架数量为0')
        const { data: result } = await this.$http.post('/shelves/add', this.onShelves)
        if (result.status === 201) return this.$message.error('上架失败')
        this.$message.success('上架成功')
        this.$refs.onShelvesRuleForm.resetFields()
      })
    },

    writeShelves () {
      var now = new Date()
      var nowstr = now.getTime()
      this.onShelves.shelvesId = 'ON' + nowstr
      this.onShelves.barCode = this.queryInfo.barCode
      this.onShelves.locationId = this.queryInfo.locationId
      this.onShelves.fromLocationId = this.queryInfo.fromLocationId
      this.onShelves.count = this.queryInfo.count
      this.onShelves.createPerson = window.sessionStorage.getItem('token').substr(32)
      // console.log(this.onShelves)
    }

  },
  mounted () {
    this.getOptions()
    this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
  .box-card{
    height: 95%;
    width: 95%;

  }
  .form{
    position: absolute;
    top: 40%;
    left: 35%;
    /* right: 20%; */
  }
  .btm{
    /* align-items: center; */
    position: absolute;
    left: 60%;
  }
</style>
